<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <#include "cdn.ftl">
  <style>
    .login {
      margin: 18vh auto;
      width: 30%;
      min-width: 280px;
      text-align: center;
    }
  </style>
  <title>登录</title>
</head>
<body style="background-color: #6ac3c9;">
<div class="container">
  <div class="login">
    <div class="panel">
      <div class="panel-heading">
        <div class="panel-title">
          <h3>报名系统管理登录</h3>
        </div>
      </div>
      <div class="panel-body">
        <form>
          <div class="form-group">
            <input class="form-control" name="username" placeholder="用户名" required>
          </div>
          <div class="form-group">
            <input type="password" class="form-control" name="password" placeholder="密码" required>
          </div>
          <div class="pull-right">
            <label for="bao">
              <input id="bao" type="checkbox" name="remember" value="true" checked>记住密码
            </label>
          </div>
          <button type="submit" class="btn btn-info btn-group-justified">登 录</button>
        </form>
      </div>
    </div>
  </div>
</div>
<script>
  $('form').submit(function (e) {
    e.preventDefault();
    var index = layer.load(0, {time: 10 * 1000});
    var self = e.target;
    var fd = new FormData(self);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '${root}/login', true);
    xhr.onload = function (ev) {
      layer.close(index);
      var data = JSON.parse(xhr.responseText);
      if (data.success) {
        layer.msg('登录成功！', {icon: 6, time: 1000});
        window.setTimeout(function () {
          location.href = '${root}/admin';
        }, 1000);
      } else {
        layer.alert("ERROR: " + data.msg, {title:'登录失败', icon:5}, function (index) {
          layer.close(index);
        });
      }
    };
    xhr.send(fd);
  });
</script>
</body>
</html>